<template>
  <div v-if="isShow" class="popWrap">
    <div class="popCont">
      <div class="table-name">
        <div>姓名</div>
        <input type="text" v-model="popData.name" />
      </div>
      <div class="table-name">
        <div>性别</div>
        <select name="" id="" v-model="popData.sex">
          <option>{{ fillter[0] }}</option>
          <option :value="fillter[1]">{{ fillter[1] }}</option>
        </select>
      </div>
      <div class="table-name">
        <div>权限分配</div>
        <select name="" id="" v-model="popData.lv">
          <option v-for="item in lvOptions" :key="item.value">
            {{ item.label }}
          </option>
        </select>
      </div>
      <button @click="noedit">取消</button>
      <button @click="commitEdit" ><slot></slot>  </button>
    </div>
  </div>
</template>

<script>
/**
 * @desc: 定义通用弹窗组件POPUP
 * @props
 *   - isShow: boolean 控制弹窗是否弹出
 *
 *   - popData: Object   传入的值
 *     -fillter:Object 性别选择
 *   - lvOptions: Array  等级的选择
 *  -noedit:Function 点击取消的回调
 *  - commitEdit:Function点击修改的回调
 *  -addUser:Function点击添加的回调
 *   -  插槽 ：  跟换展示的内容
 * **/
export default {
  props: {
    isShow: Boolean,
    popData: Object,
    fillter: Object,
    lvOptions: Array,
    noedit: Function,
    commitEdit: Function,
    addUser:Function
  },
  data() {
    return {
      seletor: "",
      listData: [],
    };
  },

  mounted() {},

  methods: {
    ensure(e) {
       if( e.target.innerHTML==='修改'){
        this.commitEdit(this.popData);
       }else{
          this.addUser(this.popData)
       }
    
    },
  },
};
</script>

<style lang="scss" scoped>
.popWrap {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background: rgba($color: #000000, $alpha: 0.5);
  .popCont {
    position: absolute;
    top: 50px;
    left: calc(50% - 250px);
    z-index: 999;
    width: 500px;
    height: 400px;
    background: yellowgreen;
  }
  .table-name {
    margin-bottom: 50px;
  }
  button {
    width: 100px;
  }
}
</style>